<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.el-tabs {
			margin-top: 40px;
		}
		.table {
			border: 1px solid #ccc;
		}
		.option {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 20px 14px;
			font-size: 16px;
		}
		.addnew {
			border: 1px solid #333;
			padding: 3px 10px;
			border-radius: 6px;
		}
		.shop {
			border: 1px solid #ccc;
			padding: 20px 40px;
			font-size: 14px;
		}
		.leftinfo .title {
			display: flex;
		}
		.shopname {
			font-size: 20px;
			font-weight: bold;
		}
		.status {
			margin-left: 40px;
		}
		.infoitem {
			display: flex;
			margin-top: 10px;
		}
		.itemname {
			min-width: 70px;
		}
		.itemcontent {
			margin-left: 20px;
		}
		.topinfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ccc;
			padding-bottom: 10px;
			margin-bottom: 10px;
		}
		.pagetitle {
			font-size: 18px;
			font-weight: bold;
			color: #409EFF;
		}
		.close {
			margin-right: 30px;
			border: 1px solid #ccc;
			height: 26px;
			line-height: 26px;
			padding: 4px 16px;
			border-radius: 4px;
			margin-left: 20px;
		}
		.shop,.el-tabs {
			background: #fff;
		}
		.el-tabs {
			padding-top: 20px;
		}
		.el-tabs__header {
			padding: 0 20px;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
		.select {
			margin-bottom: 10px;
			display: flex;
			justify-content: flex-end;
		}
		.advertise {
			padding: 0 20px 50px;
			display: flex;
			align-items: center;
		}
		.adimg {
			width: 260px;
		}
		.adimg .img img {
			width: 260px;
			height: 260px;
		}
		.btns {
			margin-top: 14px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.addone {
			width: 80px;
			height: 80px;
			text-align: center;
			line-height: 80px;
			border: 1px solid #ccc;
			margin-left: 40px;
			font-size: 26px;
		}
		.pagenation {
			text-align: center;
			margin-top: 10px;
		}
	</style>
</block>
<block name="content">
	<div class="shop">
		<div class="topinfo">
			<div class="pagetitle">门店详情</div>
			<el-button type="primary" size="small" @click="editStore">编辑</el-button>
		</div>
		<div class="leftinfo">
			<div class="title">
				<div class="shopname">{$data['store_name']}</div>
				<div class="status">状态：活跃<span class="close">停用</span></div>
			</div>
			<div class="infoitem">
				<div class="itemname">店长姓名</div>
				<div class="itemcontent">{$data['manager_name']}</div>
			</div>
			<div class="infoitem">
				<div class="itemname">登录手机</div>
				<div class="itemcontent">{$data['mobile']}</div>
			</div>
			<div class="infoitem">
				<div class="itemname">门店地址</div>
				<div class="itemcontent">{$data['address']}</div>
			</div>
			<div class="infoitem">
				<div class="itemname">城市合伙人</div>
				<div class="itemcontent"></div>
			</div>
		</div>
	</div>
	<el-tabs v-model="activeTab" type="card">
		<!-- todo 广告位管理 -->
		<el-tab-pane label="广告位管理"  name="advertise">
			<div class="advertise">
				<div class="adimg" v-for="item in ads">
					<div class="img"><img :src="item.full_filepath" alt=""></div>
					<div class="btns">
						<div>
							<el-button type="danger" size="mini" @click="deleteConfirm(item.id)">删除</el-button>
							<span style="border: 1px solid #ccc;padding: 3px 8px;font-size:  12px;" v-if="item.is_upper_air == '1'">高空</span>
						</div>
						<span>{{item.ad_name}}</span>
						<el-button type="primary" size="mini" @click="toEdit(item.id)">编辑</el-button>
					</div>
				</div>
				<div class="addone" @click="addAds"><i class="el-icon-plus"></i></div>
			</div>
		</el-tab-pane>
		<el-tab-pane label="累计订单" name="totalorder">
			<div class="select">
				<el-select v-model="param.search_order_status" @change="changeParam">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
				</el-select>
				<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
					<i slot="suffix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<div class="table">
				<el-table :data="tableData" height="250" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}" >
					<el-table-column prop="order_no" label="订单编号"></el-table-column>
					<el-table-column prop="store_name" label="公司简称"></el-table-column>
					<el-table-column prop="audit_name" label="审核员"></el-table-column>
					<el-table-column prop="activity_name" label="活动名称"></el-table-column>
					<el-table-column prop="manager_name" label="客戶"></el-table-column>
					<el-table-column prop="order_status" label="状态">
						<template slot-scope="scope">
							<span v-if="scope.row.order_status == '0'">待店长下单</span>
							<span v-if="scope.row.order_status == '1'">待审核</span>
							<span v-if="scope.row.order_status == '2'">审核未通过</span>
							<span v-if="scope.row.order_status == '3'">进行中</span>
							<span v-if="scope.row.order_status == '4'">上画待验收</span>
							<span v-if="scope.row.order_status == '5'">上画验收完成</span>
							<span v-if="scope.row.order_status == '6'">下画待验收</span>
							<span v-if="scope.row.order_status == '7'">订单完成</span>
							<span v-if="scope.row.order_status == '11'">高空物料待报价</span>
							<span v-if="scope.row.order_status == '12'">高空物料报价待审核</span>
							<span v-if="scope.row.order_status == '13'">高空报价审核失败</span>
						</template>
					</el-table-column>
					<el-table-column prop="charger" label="项目负责人"></el-table-column>
					<el-table-column prop="partner_name" label="城市合伙人"></el-table-column>
					<el-table-column prop="option" label="操作">
						<template slot-scope="scope">
							<span style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;" @click="toDetail(scope.row.order_no)">查看</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="pagenation">
				<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
							   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
			</div>
		</el-tab-pane>
	</el-tabs>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    activeTab: "totalorder",
                    status: "",
                    orderstatus: "",
                    orderList: [],
                    options: [
                        {
                            value: '0',
                            label: '待店长下单'
                        }, {
                            value: '1',
                            label: '待审核'
                        }, {
                            value: '2',
                            label: '审核未通过'
                        }, {
                            value: '3',
                            label: '进行中'
                        }, {
                            value: '4',
                            label: '上画待验收'
                        }, {
                            value: '5',
                            label: '上画验收完成'
                        }, {
                            value: '6',
                            label: '下画待验收'
                        }, {
                            value: '7',
                            label: '订单完成'
                        }, {
                            value: '11',
                            label: '高空物料待报价'
                        }, {
                            value: '12',
                            label: '高空物料报价待审核'
                        }, {
                            value: '13',
                            label: '高空报价审核失败'
                        }
                    ],
					ads: [],
					//订单
                    param: {
                        order_status: '0,1,2,3,4,5,6,7,11,12,13',
						search_order_status: '',
						store_id: '{$id}',
                        key: '',
                        page: 1,
                        size: 10
                    },
                    total: 0,
                    tableData:[]
                }
            },
            created: function () {
                this.getData();
                this.getAds();
            },
            methods: {
                // 订单
                getData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Order/getData', _this.param, function (data) {
                        if(data.status){
                            _this.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                handleSizeChange: function (size) {
                    this.param.size = size;
                    this.getData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                changeParam: function () {
                    this.param.page = 1;
                    this.getData();
                },
                toDetail(order_no) {
                    window.location.href = HOME_URL + "/orderAdmin/Order/detail?order_no=" + order_no;
                },
				// 广告位
				getAds: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/Store/getAds', {id: _this.param.store_id}, function (data) {
                        if(data.status){
                            _this.ads = data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                deleteConfirm(id) {
                    this.$confirm('确定删除此广告位?', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        center: true
                    }).then(() => {
                        var _this = this;
                        $.post(HOME_URL + '/orderAdmin/Ads/deleteById', {id: id}, function (data) {
                            if(data.status){
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                _this.getAds();
                            }else{
                                _this.$message.error(data.msg);
                            }
                        }, 'json');
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },

                toEdit(id) {
                    window.location.href = HOME_URL+"/orderAdmin/Ads/edit?id=" + id;
                },
                addAds(){
                    window.location.href = HOME_URL+"/orderAdmin/Ads/add?store_id=" + this.param.store_id;
				},
                editStore() {
                    window.location.href = HOME_URL+"/orderAdmin/Store/edit?id=" + this.param.store_id;
                }
            }
        });
	</script>
</block>
